<template>
  <div class="info-wrapper">
    <div class="info-box">
      <h1>Upload your music</h1>
      <el-form :model="form" label-width="120px">
        <el-form-item label="Singername">
          <el-input v-model="singername" disabled/>
        </el-form-item>
        <el-form-item label="Songname">
          <el-input v-model="name" />
        </el-form-item>
        <el-form-item label="Albumid">
          <el-select v-model="albumid">
            <el-option label="1" value=1 />
            <el-option label="2" value=2 />
            <el-option label="3" value=3 />
            <el-option label="4" value=4 />
            <el-option label="5" value=5 />
            <el-option label="6" value=6 />
            <el-option label="7" value=7 />
            <el-option label="8" value=8 />
            <el-option label="9" value=9 />
            <el-option label="10" value=10 />
          </el-select>
        </el-form-item>
        <el-form-item label="Albumname">
          <el-input v-model="albumname" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'upload',
  props: {
    currentUserId: { type: Number }
  },
  data() {
    return {
      name: '',
      albumid: '',
      albumname: '',
      singerid: '',
      singername: ''
    }
  },
  methods: {
    handleSubmit() {
      if (this.name=='' || this.albumname=='' || this.albumid=='') {
        ElMessage({
          message: 'All fields are required',
          type: 'warning'
        })
      } else {
        let params = {
          'name': this.name,
          'albumid': Number(this.albumid),
          'albumname': this.albumname,
          'singerid': this.currentUserId,
          'singername': this.singername
        }
        // console.log(params)
        axios({
          method: 'post',
          url: '/api/uploadSong',
          params: params
        }).then((res) => {
          if (res.data.success) {
            ElMessage({
              message: 'Successfully Uploaded!',
              type: 'success'
            })
          }
        })
      } 
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: '/api/getInfoByUserId',
      params: {
        userid: this.currentUserId
      }
    }).then((res) => {
      this.$nextTick(() => {
        if (res.data.success) {
          // console.log(res.data.data[0])
          this.singerid = this.currentUserId
          this.singername = res.data.data[0].nickname
        }
      })
    })
  },
}
</script>

<style scoped>
.info-wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.info-box {
  margin: 0 auto;
  height: calc(100% - 40px);
  width: calc(800px);
  box-shadow: var(--el-box-shadow);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
</style>